<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学习成长平台 - 动画人偶系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
      color: white;
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    header {
      text-align: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }

    .main-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .avatar-section {
      flex: 1;
      min-width: 300px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .avatar-container {
      position: relative;
      width: 300px;
      height: 400px;
      margin: 20px auto;
    }

    canvas {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
    }

    .stats {
      width: 100%;
      margin-top: 20px;
      background: rgba(0, 0, 0, 0.2);
      padding: 15px;
      border-radius: 10px;
    }

    .stat-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .progress-bar {
      height: 10px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      overflow: hidden;
      margin-top: 5px;
    }

    .progress {
      height: 100%;
      background: linear-gradient(90deg, #4facfe, #00f2fe);
      border-radius: 5px;
      transition: width 0.5s ease;
    }

    .learning-section {
      flex: 2;
      min-width: 300px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .question-container {
      background: rgba(0, 0, 0, 0.2);
      padding: 20px;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .question {
      font-size: 1.3rem;
      margin-bottom: 15px;
    }

    .options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .option {
      padding: 12px 15px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .option:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
    }

    .correct {
      background: rgba(76, 175, 80, 0.3);
    }

    .incorrect {
      background: rgba(244, 67, 54, 0.3);
    }

    .equipment-section {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 20px;
    }

    .equipment-item {
      width: 80px;
      height: 80px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 0.8rem;
      transition: all 0.3s ease;
    }

    .equipment-item.locked {
      opacity: 0.5;
      filter: grayscale(1);
    }

    .equipment-item.unlocked {
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .equipment-icon {
      font-size: 1.5rem;
      margin-bottom: 5px;
    }

    .achievement-section {
      flex: 1;
      min-width: 300px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .achievement-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 15px;
    }

    .achievement {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
    }

    .achievement-icon {
      width: 40px;
      height: 40px;
      background: gold;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn {
      padding: 12px 25px;
      background: linear-gradient(135deg, #4facfe, #00f2fe);
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 15px;
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 20px;
      background: rgba(76, 175, 80, 0.9);
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      transform: translateX(150%);
      transition: transform 0.5s ease;
      z-index: 1000;
    }

    .notification.show {
      transform: translateX(0);
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    .pulse {
      animation: pulse 0.5s ease;
    }

    @media (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>学习成长平台</h1>
    <p class="subtitle">通过答题解锁装备，打造专属学习人偶</p>
  </header>

  <div class="main-content">
    <section class="avatar-section">
      <h2>您的学习人偶</h2>
      <div class="avatar-container">
        <canvas id="avatarCanvas" width="300" height="400"></canvas>
      </div>

      <div class="stats">
        <div class="stat-item">
          <span>学习等级</span>
          <span id="level">1</span>
        </div>
        <div class="progress-bar">
          <div id="levelProgress" class="progress" style="width: 10%"></div>
        </div>

        <div class="stat-item">
          <span>知识积分</span>
          <span id="points">50</span>
        </div>
        <div class="progress-bar">
          <div id="pointsProgress" class="progress" style="width: 10%"></div>
        </div>

        <div class="stat-item">
          <span>连续正确</span>
          <span id="streak">0</span>
        </div>
      </div>

      <button class="btn" id="shareBtn">分享成就</button>
    </section>

    <section class="learning-section">
      <h2>学习挑战</h2>
      <div class="question-container">
        <div class="question" id="question">JavaScript中，以下哪个方法用于向数组末尾添加元素？</div>
        <div class="options">
          <div class="option" data-correct="true">push()</div>
          <div class="option" data-correct="false">pop()</div>
          <div class="option" data-correct="false">shift()</div>
          <div class="option" data-correct="false">unshift()</div>
        </div>
      </div>

      <h3>已解锁装备</h3>
      <div class="equipment-section">
        <div class="equipment-item unlocked">
          <div class="equipment-icon">👓</div>
          <span>学习眼镜</span>
        </div>
        <div class="equipment-item unlocked">
          <div class="equipment-icon">📚</div>
          <span>知识背包</span>
        </div>
        <div class="equipment-item" id="hat-equipment">
          <div class="equipment-icon">🎓</div>
          <span>学士帽</span>
        </div>
        <div class="equipment-item" id="sword-equipment">
          <div class="equipment-icon">⚔️</div>
          <span>智慧之剑</span>
        </div>
        <div class="equipment-item" id="shield-equipment">
          <div class="equipment-icon">🛡️</div>
          <span>专注之盾</span>
        </div>
        <div class="equipment-item" id="wings-equipment">
          <div class="equipment-icon">🪽</div>
          <span>思维之翼</span>
        </div>
      </div>

      <button class="btn" id="nextQuestion">下一题</button>
    </section>

    <section class="achievement-section">
      <h2>成就系统</h2>
      <div class="achievement-list">
        <div class="achievement">
          <div class="achievement-icon">🥉</div>
          <div>
            <h4>初学乍练</h4>
            <p>答对5道题</p>
          </div>
        </div>
        <div class="achievement">
          <div class="achievement-icon">🥈</div>
          <div>
            <h4>渐入佳境</h4>
            <p>连续答对10道题</p>
          </div>
        </div>
        <div class="achievement">
          <div class="achievement-icon">🥇</div>
          <div>
            <h4>学富五车</h4>
            <p>获得1000知识积分</p>
          </div>
        </div>
        <div class="achievement">
          <div class="achievement-icon">🏆</div>
          <div>
            <h4>知识大师</h4>
            <p>解锁所有装备</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

<div class="notification" id="notification">
  恭喜！您解锁了新装备！
</div>

<script>
  // 初始化Canvas和上下文
  const canvas = document.getElementById('avatarCanvas');
  const ctx = canvas.getContext('2d');

  // 用户状态
  const userState = {
    level: 1,
    points: 50,
    streak: 0,
    unlockedEquipment: ['glasses', 'backpack'],
    avatarSize: 1.0
  };

  // 装备定义
  const equipment = {
    'glasses': { name: '学习眼镜', icon: '👓', draw: drawGlasses },
    'backpack': { name: '知识背包', icon: '📚', draw: drawBackpack },
    'hat': { name: '学士帽', icon: '🎓', draw: drawHat },
    'sword': { name: '智慧之剑', icon: '⚔️', draw: drawSword },
    'shield': { name: '专注之盾', icon: '🛡️', draw: drawShield },
    'wings': { name: '思维之翼', icon: '🪽', draw: drawWings }
  };

  // 绘制基础人偶
  function drawBaseAvatar() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 根据用户等级调整大小
    const scale = userState.avatarSize;
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.scale(scale, scale);

    // 绘制身体
    ctx.fillStyle = '#4a90e2';
    ctx.beginPath();
    ctx.arc(0, 30, 25, 0, Math.PI * 2);
    ctx.fill(); // 头

    ctx.fillRect(-15, 55, 30, 60); // 身体

    // 绘制四肢
    ctx.fillRect(-40, 60, 25, 10); // 左臂
    ctx.fillRect(15, 60, 25, 10);  // 右臂
    ctx.fillRect(-15, 115, 10, 40); // 左腿
    ctx.fillRect(5, 115, 10, 40);   // 右腿

    // 绘制面部特征
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(-8, 25, 5, 0, Math.PI * 2);
    ctx.arc(8, 25, 5, 0, Math.PI * 2);
    ctx.fill(); // 眼睛

    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(-8, 25, 2, 0, Math.PI * 2);
    ctx.arc(8, 25, 2, 0, Math.PI * 2);
    ctx.fill(); // 瞳孔

    ctx.beginPath();
    ctx.arc(0, 35, 8, 0, Math.PI);
    ctx.stroke(); // 嘴巴

    ctx.restore();
  }

  // 绘制眼镜
  function drawGlasses() {
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.scale(userState.avatarSize, userState.avatarSize);

    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(-10, 25, 8, 0, Math.PI * 2);
    ctx.arc(10, 25, 8, 0, Math.PI * 2);
    ctx.moveTo(-2, 25);
    ctx.lineTo(2, 25);
    ctx.stroke();

    ctx.restore();
  }

  // 绘制背包
  function drawBackpack() {
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.scale(userState.avatarSize, userState.avatarSize);

    ctx.fillStyle = '#8B4513';
    ctx.fillRect(20, 60, 15, 25);

    ctx.restore();
  }

  // 绘制学士帽
  function drawHat() {
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.scale(userState.avatarSize, userState.avatarSize);

    ctx.fillStyle = '#000';
    ctx.fillRect(-25, 5, 50, 10);
    ctx.fillRect(-10, -15, 20, 20);

    ctx.restore();
  }

  // 绘制智慧之剑
  function drawSword() {
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.scale(userState.avatarSize, userState.avatarSize);

    ctx.fillStyle = '#C0C0C0';
    ctx.fillRect(45, 40, 30, 5); // 剑柄
    ctx.fillRect(40, 35, 5, 15); // 护手
    ctx.fillRect(75, 30, 30, 3); // 剑身

    ctx.restore();
  }

  // 绘制专注之盾
  function drawShield() {
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.scale(userState.avatarSize, userState.avatarSize);

    ctx.fillStyle = '#8B4513';
    ctx.beginPath();
    ctx.moveTo(-45, 60);
    ctx.lineTo(-60, 90);
    ctx.lineTo(-45, 120);
    ctx.lineTo(-30, 90);
    ctx.closePath();
    ctx.fill();

    ctx.restore();
  }

  // 绘制思维之翼
  function drawWings() {
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.scale(userState.avatarSize, userState.avatarSize);

    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
    // 左翼
    ctx.beginPath();
    ctx.moveTo(-40, 50);
    ctx.quadraticCurveTo(-70, 30, -80, 70);
    ctx.quadraticCurveTo(-70, 90, -40, 80);
    ctx.closePath();
    ctx.fill();

    // 右翼
    ctx.beginPath();
    ctx.moveTo(40, 50);
    ctx.quadraticCurveTo(70, 30, 80, 70);
    ctx.quadraticCurveTo(70, 90, 40, 80);
    ctx.closePath();
    ctx.fill();

    ctx.restore();
  }

  // 绘制完整人偶
  function drawAvatar() {
    drawBaseAvatar();

    // 绘制已解锁的装备
    userState.unlockedEquipment.forEach(item => {
      if (equipment[item]) {
        equipment[item].draw();
      }
    });
  }

  // 初始化绘制
  drawAvatar();

  // 答题逻辑
  const options = document.querySelectorAll('.option');
  const nextQuestionBtn = document.getElementById('nextQuestion');
  const notification = document.getElementById('notification');

  options.forEach(option => {
    option.addEventListener('click', function() {
      const isCorrect = this.getAttribute('data-correct') === 'true';

      // 移除之前的状态
      options.forEach(opt => {
        opt.classList.remove('correct', 'incorrect');
      });

      // 添加当前状态
      if (isCorrect) {
        this.classList.add('correct');
        handleCorrectAnswer();
      } else {
        this.classList.add('incorrect');
        userState.streak = 0;
        updateStreak();
      }
    });
  });

  // 处理正确答案
  function handleCorrectAnswer() {
    userState.points += 10;
    userState.streak += 1;

    // 每答对5题升一级
    if (userState.points % 50 === 0) {
      userState.level += 1;
      userState.avatarSize += 0.1;
      document.getElementById('level').textContent = userState.level;

      // 解锁新装备
      if (userState.level === 2 && !userState.unlockedEquipment.includes('hat')) {
        unlockEquipment('hat');
      } else if (userState.level === 3 && !userState.unlockedEquipment.includes('sword')) {
        unlockEquipment('sword');
      } else if (userState.level === 4 && !userState.unlockedEquipment.includes('shield')) {
        unlockEquipment('shield');
      } else if (userState.level === 5 && !userState.unlockedEquipment.includes('wings')) {
        unlockEquipment('wings');
      }
    }

    updatePoints();
    updateStreak();
    drawAvatar();
  }

  // 解锁装备
  function unlockEquipment(equipmentType) {
    userState.unlockedEquipment.push(equipmentType);

    // 更新UI
    const equipmentElement = document.getElementById(`${equipmentType}-equipment`);
    equipmentElement.classList.remove('locked');
    equipmentElement.classList.add('unlocked');
    equipmentElement.classList.add('pulse');

    // 显示通知
    notification.textContent = `恭喜！您解锁了${equipment[equipmentType].name}！`;
    notification.classList.add('show');

    setTimeout(() => {
      notification.classList.remove('show');
      equipmentElement.classList.remove('pulse');
    }, 3000);
  }

  // 更新积分显示
  function updatePoints() {
    document.getElementById('points').textContent = userState.points;
    const progress = Math.min(100, (userState.points % 50) * 2);
    document.getElementById('pointsProgress').style.width = `${progress}%`;
  }

  // 更新连续正确显示
  function updateStreak() {
    document.getElementById('streak').textContent = userState.streak;
  }

  // 下一题按钮
  nextQuestionBtn.addEventListener('click', function() {
    // 重置选项状态
    options.forEach(opt => {
      opt.classList.remove('correct', 'incorrect');
    });

    // 这里可以添加更换题目的逻辑
    // 现在只是简单重置
  });

  // 分享按钮
  document.getElementById('shareBtn').addEventListener('click', function() {
    alert('分享功能已触发！您的学习人偶和成就已准备好分享。');
  });
</script>
</body>
</html>